﻿<?php include('../connections/connect.php'); ?>
<?php include('../functions/graphfunctions.php'); ?>
<?php
$str = ""; $str_type = ""; $str_subType = ""; $str_data = "";
$type = $_POST['branch'];
$subType = $_POST['zone'];
$data = $_POST['DMA'];
// เชคค่าจาก dropdown 
if($type==0){
	$str_type = "";
	$str_subType = "";
	$str_data = "";
}else{
	if($type!='null' && $subType=='null' && $data=='null'){
		$str_type = " where Branch ='".$type."'";
	}else if($type!='null' && $subType=='' && $data=='null'){
		$str_type = " where Branch ='".$type."'";
	}else if($type!='null' && $subType!='null' && $data==''){
		$str_type = " where Branch ='".$type."'";
		if($subType!='null' && $subType!=''){
			$str_subType = " and zone_='".$subType."'";
		}
	}else{
		$str_type = " where Branch ='".$type."'";
		$str_subType = " and zone_='".$subType."'";
		$str_data = " and Block='".$data."'";
	}
}	
$str="";
$sqlcommand="select distinct(INST_YEAR) as type_name , sum(Shape_Length) as count_amt from watermain_pipe  $str_type $str_subType $str_data group by type_name"; // Query ที่ต้องเปลี่ยน เค้าไม่รู้ว่าดึงจาก DB ไหน ดึงมาเป็นตัวอย่างเพื่อจัดรูปแบบ string ให้ตรงกับที่พี่ใช้ในข้อมูลให้ Graph (แก้แค่ SQL กับฟิล์ดที่เลือกมาแสดงพอ)
$result = mysql_query($sqlcommand, $connect)or die(mysql_error()); 
$num = mysql_num_rows($result);
$year = array();
$length = array();
$j=1; $a=0;
// fetch ข้อมูลจาก database
while ($row = mysql_fetch_assoc($result)) {    
    $firstname = trim(addslashes($row['type_name']));
	$height = $row['count_amt'];
	
	$year[$a] = getage($firstname); // แปลงข้อมูลพศเป็นอายุท่อ
	$length[$a] = changetokilo($height); //เปลี่ยนหน่วยเป็นกิโลเมตร
	$a++;

}
$year = array_reverse($year);//เรียงข้อมูลในอาเรย์ใหม่
$length = array_reverse($length);

for($i =0;$i<=$num;$i++){	//เตรียมข้อมูลเอาลงกราฟ
	if($year[$i]!="ไม่ระบุอายุ"){
		$str[1] .= "'".$year[$i]."'";
		$str[2] .= "".$length[$i]."";
		$str[3] .= "['".$year[$i]."',".$length[$i]."]";
	
		if($num-$j>0){
		$str[1] .= ",";
		$str[2] .= ",";
		$str[3] .= ",";
		}
		$j++;
	}
}
 $output1=$str[1];
 $output2=$str[2];
 $pieChartOutput=$str[3];
  /*-------------------------------------- Get Subtitle----------------------------*/
 $subtitle = getSubtitle($type,$subType,$data,$connect);
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>WMA Grpah</title>
	<link rel="stylesheet" type="text/css" href="../css/dropdown.css">
	<script language="JavaScript" type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
	<script src="http://code.highcharts.com/highcharts.js"></script>
	<script src="http://code.highcharts.com/modules/exporting.js"></script>
	<script type="text/javascript">
    
$(document).ready(function() {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'กราฟแสดงความยาวท่อประธานแยกตามอายุ'
        },
		subtitle: {
			text: '<?php echo $subtitle ?>'
		},
        xAxis: {
			categories: [<?php echo $output1 ?>]
        },
        yAxis: {
            title: {
                text: 'ความยาวท่อ (กิโลเมตร)'
            }
        },
		tooltip: {
            valueSuffix: ' Km'
        },
        series: [{
            name: 'อายุท่อ(ปี)',
			data: [<?php echo $output2 ?>]
        }/*, {
            name: 'John',
            data: [5, 7, 3]
        }*/],
    });
	
	$("#Line").click(function() { 
		console.log("Line");
		$('#container').highcharts({
			chart: {
				type: 'line'
			},
			title: {
				text: 'กราฟแสดงความยาวท่อประธานแยกตามอายุ'
			},
			subtitle: {
				text: '<?php echo $subtitle ?>'
			},
			xAxis: {
				categories: [<?php echo $output1 ?>]
			},
			yAxis: {
				title: {
					text: 'ความยาวท่อ (กิโลเมตร)'
				}
			},
			tooltip: {
				valueSuffix: ' Km'
			},
			series: [{
				name: 'อายุท่อ(ปี)',
				data: [<?php echo $output2 ?>]
			}/*, {
				name: 'John',
				data: [5, 7, 3]
			}*/],
		});

	})
	
	$("#Bar").click(function() { 
		$('#container').highcharts({
			chart: {
				type: 'column'
			},
			title: {
				text: 'กราฟแสดงความยาวท่อประธานแยกตามอายุ'
			},
			subtitle: {
				text: '<?php echo $subtitle ?>'
			},
			xAxis: {
				categories: [<?php echo $output1 ?>]
			},
			yAxis: {
				title: {
					text: 'ความยาวท่อ (กิโลเมตร)'
				}
			},
			tooltip: {
				valueSuffix: ' Km'
			},
			series: [{
				name: 'อายุท่อ(ปี)',
				data: [<?php echo $output2 ?>]
			}/*, {
				name: 'John',
				data: [5, 7, 3]
			}*/],
		});

	})
	
	$("#Pie").click(function() { 
		console.log("Pie");
		$('#container').highcharts({
			chart: {
				type: 'pie'
			},
			title: {
				text: 'กราฟแสดงความยาวท่อประธานแยกตามอายุ'
			},
			subtitle: {
				text: '<?php echo $subtitle ?>'
			},
			xAxis: {
				categories: [<?php echo $output1 ?>]
			},
			yAxis: {
				title: {
					text: 'ความยาวท่อ (กิโลเมตร)'
				}
			},
			tooltip: {
				valueSuffix: ' Km'
			},
			series: [{
				type: 'pie',
				name: 'อายุท่อ(ปี)',
				data: [<?php echo $pieChartOutput ?>]
			}/*, {
				name: 'John',
				data: [5, 7, 3]
			}*/],
		});

	})
	
	/*-------------------------------------------------------------- drop down menu ----------------------------------*/
	$(".account").click(function()
		{
		var X=$(this).attr('id');
		if(X==1)
		{
		$(".submenu").hide();
		$(this).attr('id', '0');
		}
		else
		{
		$(".submenu").show();
		$(this).attr('id', '1');
		}

		});

		//Mouse click on sub menu
		$(".submenu").mouseup(function()
		{
		return false
		});

		//Mouse click on my account link
		$(".account").mouseup(function()
		{
		return false
		});

		//Document Click
		$(document).mouseup(function()
		{
		$(".submenu").hide();
		$(".account").attr('id', '');
	});
});
    
</script>
</head>

<form>
		<table border="0">
			<thead>
				<tr>
					<th><div class="dropdown">
						<a class="account">เปลี่ยนกราฟ</a>	
						<div class="submenu">
							<ul class="root">
							<li ><a id="Pie" href="#Pie" >Pie Chart</a></li>
							<li ><a id="Line" href="#Line" >Line Chart</a></li>
							<li ><a id="Bar" href="#Column">Bar Chart</a></li>
							</ul>
							</div>
						</div>
						</th>
					<th><input name="btn_back" type="button" id="btn_back" value="Back" onclick="window.location='dropDownList.php'"/></th>			
				</tr>
			</thead>
		</table>
	
</form>

<div id="container" style="height: 400px;"></div>
	
</body>
</html>